<include file="Index/_meta" />
<body>

<div class="right">
    <div class="mg40">
        <div class="cheliangtop">
            <div class="layui-row">
                <div class="layui-col-md1">
                    <div>&nbsp;</div>
                </div>
                <div class="layui-col-md5">
                    <div class="chelianghd">
                        <div id="qu_chewg" class="cavascenter"></div>
                    </div>
                </div>
                <div class="layui-col-md5">
                    <div class="cheliangwy">
                        <div id="sqclzl" class="cavascenter"></div>
                    </div>
                </div>
                <div class="layui-col-md1">
                    <div>&nbsp;</div>
                </div>
            </div>
        </div> 
        <div class="rkzhubiao">
            <div id="zhexian" class="cavascenter"></div>
        </div>  
    </div> 
</div>
<!-- 违规次数统计图 -->
<script type="text/javascript">
    var dom = document.getElementById("qu_chewg");
    var myChart = echarts.init(dom);
    var app = {};
    var option = null;

    option = {
        title : {
            text: '违规次数统计图',
            subtext: '',
            x:'center'
        },
        color: ['#3398DB'],
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : ['1次', '2次', '3次', '4次', '4次以上'],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'车数',
                type:'bar',
                barWidth: '60%',
                data:[660, 6618, 2412, 430, 280]
            }
        ]
    };

    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
<!-- 车辆用途图 -->
<script type="text/javascript">
    var dom = document.getElementById("sqclzl");
    var myChart = echarts.init(dom);
    var app = {};
    var option = null;
    option = {
        title : {
            text: '车辆用途图',
            subtext: '',
            x:'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            data:['家用','商用','大型货车','中型货车','小型货车']
        },
        series: [
            {
                name:'用途',
                type:'pie',
                selectedMode: 'single',
                radius: [0, '30%'],

                label: {
                    normal: {
                        position: 'inner'
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[
                    {value:6000, name:'家用'},
                    {value:3000, name:'商用'},
                    {value:1500, name:'货运'}
                ]
            },
            {
                name:'类型',
                type:'pie',
                radius: ['40%', '55%'],
                label: {
                    normal: {
                        // formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                        backgroundColor: '#eee',
                        borderColor: '#aaa',
                        borderWidth: 1,
                        borderRadius: 4,
                        rich: {
                            a: {
                                color: '#999',
                                lineHeight: 22,
                                align: 'center'
                            },
                            hr: {
                                borderColor: '#aaa',
                                width: '100%',
                                borderWidth: 0.5,
                                height: 0
                            },
                            b: {
                                fontSize: 16,
                                lineHeight: 33
                            },
                            per: {
                                color: '#eee',
                                backgroundColor: '#334455',
                                padding: [2, 4],
                                borderRadius: 2
                            }
                        }
                    }
                },
                data:[
                    {value:6000, name:'家用'},
                    {value:3000, name:'商用'},
                    {value:300, name:'大型货车'},
                    {value:700, name:'中型货车'},
                    {value:500, name:'小型货车'}
                ]
            }
        ]
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
<!-- 车辆增长图 -->
<script type="text/javascript">
    var dom = document.getElementById("zhexian");
    var myChart = echarts.init(dom);
    var app = {};
    var option = null;
    option = {
        title: {
            text: '车辆增长图',
            subtext: '                      车辆数'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['1999', '2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018','年份']
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} K'
            },
            axisPointer: {
                snap: true
            }
        },
        visualMap: {
            show: false,
            dimension: 0,
            pieces: [{
                lte: 12,
                color: 'red'
            },
            {
                gt: 12,
                lte: 13,
                color: 'green'
            },
            {
                gt: 13,
                lte: 17,
                color: 'red'
            },
            {
                gt: 17,
                color: 'red'
            }]
        },
        series: [{
            name: '车辆数',
            type: 'line',
            smooth: true,
            data: [10.8, 13.4, 15.7, 19.6, 22.8, 25.0, 28.6, 30.7, 31.4, 32.7, 33.0, 34.2, 35.4, 34.9, 36, 37.2, 38.8, 39.2, 39.6, 41.5],
        }]
    };;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>